<template>
    <div class="common job">
        <innerCommon 
            :location="location"
        >
        <template slot="left">
            <span>人才需求列表</span>
            <a-input-search class="inputStyle" placeholder="搜索名称"  v-model="searchValue" enter-button @search="onSearch" />
        </template>
        <div slot="right">
            <a-button type="primary" @click="add()" v-if="isMe">新增</a-button>
        </div>
        <div slot="table" class="tableWrap">
            <ul class="tableWrapUl">
                <li :class="{'isActive':isMe}" @click="toggle(0)">我发布的需求</li>
                <li :class="{'isActive':!isMe}" @click="toggle(1)">联盟单位发布的需求</li>
            </ul>
            <a-table 
                size="middle"
                :columns="isMe?mindColumns:columns" 
                :data-source="isMe?mindList:list" 
                :pagination="isMe?mindPagination:pagination"
                :rowKey="record=>record.id"
                @change="changePage"
                :locale="{'emptyText': '暂无数据'}"
                bordered>
                <div slot="address" slot-scope="index,record">
                    {{(record.province||'')+(record.city||'')}}
                </div>
                <div slot="status" v-if="isMe" slot-scope="index,record">
                    <span v-if="record.status==0" style="color:red">未发布</span>
                    <span v-else style="color:green">已发布</span>
                </div>
                <div slot="status" v-else slot-scope="index,record">
                    <span v-if="record.status==0" style="color:orange">未审核</span>
                    <span v-else-if="record.status==1" style="color:green">已通过</span>
                    <span v-else style="color:red">已拒绝</span>
                </div>
                <div v-if="isMe" slot="action" slot-scope="index,record" class="tableAction">
                    <span @click="edit(record.id)">修改</span>
                    <confirmBox
                        @handleOk="deleteNews(record)"
                        :typeName="'删除'"
                        :noticeInfo="record.title"
                        :noticeType="'岗位'"
                    ></confirmBox>
                    <confirmBox
                        @handleOk="publish(record.id)"
                        v-if="record.status==0"
                        :typeName="'发布'"
                    ></confirmBox>
                    <confirmBox
                        @handleOk="stayAtTop(record.id,record.stayAtTop)"
                        :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                    ></confirmBox>
                </div>
                <div v-else slot="action" slot-scope="index,record" class="tableAction">
                    <span v-if="record.status!=1" @click="pass(record.id,0)">通过</span>
                    <span v-if="record.status!=2" @click="pass(record.id,1)">不通过</span>
                    <span @click="toDetail(record.id)">查看详情</span>
                </div>
            </a-table>
        </div>
        </innerCommon>
        <detailModal
            :dataList="dataList"
            :detailBox="detailBox"
            @cancel="detailBox=false"
        >
            <div slot="content">
                <div v-html="content" class="ql-editor"></div>
            </div>
        </detailModal>
    </div>
</template>
<script>
const mindColumns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '招聘单位',
        dataIndex: 'unitname',
    },{
        title: '职位名称',
        dataIndex: 'title',
    },{
        title: '职位类别',
        dataIndex: 'type',
        width:120
    },{
        title: '工作地点',
        scopedSlots: { customRender: 'address' },
    },{
        title: '招聘人数（人）',
        dataIndex: 'needNum',
        width:140
    },{
        title: '发布者',
        dataIndex: 'publisher',
    },{
        title: '发布时间',
        dataIndex: 'pubTime',
        width:200
    },{
        title: '发布状态',
        scopedSlots: { customRender: 'status' },
        width:100
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:200
    }
]

const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '申请单位',
        dataIndex: 'unitname',
    },{
        title: '职位名称',
        dataIndex: 'title',
    },{
        title: '职位类别',
        dataIndex: 'type',
    },{
        title: '学历要求',
        dataIndex: 'education',
        width:150
    },{
        title: '薪资待遇',
        dataIndex: 'salary',
        width:100
    },{
        title: '工作地点',
        dataIndex: 'address',
    },{
        title: '招聘人数',
        dataIndex: 'needNum',
        width:100
    },{
        title: '申请时间',
        dataIndex: 'createTime',
        width:200
    },{
        title: '审核人',
        dataIndex: 'publisher',
    },{
        title: '审核状态',
        scopedSlots: { customRender: 'status' },
        width:100
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:200
    }
]
import confirmBox from "@/components/common/confirmBox"
import detailModal from "@/components/common/detailModal"
import innerCommon from "@/components/common/innerCommon"
import {getMindJobListApi,getJobListApi,jobPublishApi,jobStayAtTopApi,deleteJobApi,getInstituteDetailApi,refuseJobApi,searchJobApi} from "@/request/api"
export default {
    name:'job',
    components:{innerCommon,confirmBox,detailModal},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.location=[{
            name:"信息发布管理",
            path:''
        },{
            name:"人才需求",
            path:'/job'
        }]
        this.toggle(0)
    },
    data(){
        return{
            location:[],
            isMe:true,
            columns,
            mindColumns,
            list:[],
            mindList:[],
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:''
            },
            mindSearchInfo:{
                page:1,
                pageSize:10,
                keyword:''
            },
            mindPagination:{pageSize:10,total:0,mindCurrent:1},
            pagination:{pageSize:10,total:0,current:1},
            dataList:[],
            detailBox:false,
            content:'',
            searchValue:''
        }
    },
    methods:{
        toggle(data){
            this.isMe=data==0?true:false
            this.init()
        },
        init(){
            this.getToken(this.isMe?getMindJobListApi:getJobListApi,this.isMe?this.mindSearchInfo:this.searchInfo,res=>{
                this.dealData(res.data.rows,res.data.count)
            })
        },
        dealData(list,total){
            if(this.isMe){
                this.mindList=list.map((item,index)=>({
                            ...item,
                            'index':(this.mindSearchInfo.page-1)*10+index+1,
                            'unitname':item.institute.name,
                            'publisher':item.publisher&&item.publisher.name,
                        }))
                this.mindPagination.total=total
            }else{
                this.list=list.map((item,index)=>({...item,'index':(this.searchInfo.page-1)*10+index+1,'unitname':item.institute.name,'publisher':item.publisher&&item.publisher.name}))
                this.pagination.total=total
            }
            
        },
        onSearch(data){
            let formData={}
            if(this.isMe){
                this.mindSearchInfo.keyword=data.trim()
                formData={...this.mindSearchInfo,'type':'admin'}
            }else{
                this.searchInfo.keyword=data.trim()
                formData={...this.searchInfo,'type':'institute'}
            }
            this.getToken(searchJobApi,formData,res=>{
                this.dealData(res.data.rows,res.data.total)
            })
        },
        add(){
            this.$router.push({path:'/jobAdd'})
        },
        
        changePage(data){
            if(this.isMe){
                this.mindSearchInfo.page=data.current
            }else{
                this.searchInfo.page=data.current
            }
            this.init()
        },
        publish(id){
            this.getToken(jobPublishApi,{'jobId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(id,stayAtTop){
            this.getToken(jobStayAtTopApi,{'jobId':id,'stayAtTop':stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        deleteNews(data){
            this.getToken(deleteJobApi,{'jobId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        pass(id,type){
            let api=type==0?jobPublishApi:refuseJobApi
            this.getToken(api,{'jobId':id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        edit(id){
            this.$router.push({path:'/jobAdd',query:{id}})
        },
        toDetail(id){
            this.getToken(getInstituteDetailApi,{'jobId':id},res=>{
                this.detailBox=true
                let info=res.data
                this.content=res.data.content
                this.dataList=[
                    {
                        'name':'申请单位',
                        'info':info.institute&&info.institute.name
                    },{
                        'name':'单位属性',
                        'info':info.institute&&info.institute.role
                    },{
                        'name':'职位名称',
                        'info':info.title
                    },{
                        'name':'职位类别',
                        'info':info.type
                    },{
                        'name':'工作地点',
                        'info':info.province+info.city+info.district+info.address
                    },{
                        'name':'招聘人数',
                        'info':info.needNum
                    },{
                        'name':'学历要求',
                        'info':info.education
                    },{
                        'name':'薪资待遇',
                        'info':info.salary
                    },{
                        'name':'岗位内容',
                        'scopedSlots':{"customRender":'content'},
                    }

                ]
            })
        }
    }
}
</script>
<style lang="stylus">
.job
    .content
        margin-top:76px;
        .tableWrap
            position relative
            .tableWrapUl
                list-style:none;
                display:flex;
                position:absolute;
                top:-140px;
                left:-60px;
                li
                    width:150px;
                    line-height:60px;
                    height:60px;
                    text-align:center;
                    border-right:1px solid #ddd;
                    border-top:1px solid #ddd;
                    background:#fff;
                    cursor pointer
                .isActive
                    background:#1890ff;
                    color:#fff;
</style>